<template>
    <div id="page">
        <div id="query">{{num}}条结果</div>
        <div id="main">
            <div id="left">
                <span>分类筛选:</span>
                <div class="typeitem">
                    <button   @click="querytype('文学')">文学</button>
                    <button   @click="querytype('历史')">历史</button>
                    <button   @click="querytype('工学')">工学</button>
                    <button   @click="querytype('理学')">理学</button>
                    <button   @click="querytype('哲学')">哲学</button>
                    <button   @click="querytype('小说')">小说</button>
                    <button   @click="querytype('社会文化')">社会文化</button>
                    <button   @click="querytype('自然科学')">自然科学</button>
                </div>
            </div>
    <div id="right">
  <template v-if="tf && message !== 3">
       <Bookitems :books="books1 == null ? books : books1" :mess="mess" @change="onchange"></Bookitems>
  </template>
  <template v-if="!tf && message !== 3">
       <Detail :book="book" @change="onchange" @transmit="getMessage"></Detail>
  </template>
  <template v-if="message === 3">
    <div>
         <Author :author="book.id" @change="onchangeBook" />
   
</div>
  </template>
  
        </div>
        </div>
    </div>
  </template>
  <style src="../style/pageshow.css" scoped>
  </style>
  <script>
  import {books} from "../data/books";
  import Bookitems from '../components/Bookitems.vue';
  import Detail from '../components/Detail.vue';
  import Author from '../components/Author.vue';
  
  
  
  export default {
  name: 'PageShow',
  components: {//组件
    Bookitems,
    Detail,
    Author
  },
    data:function(){
        return{
            bookname:this.$route.params.bookname?this.$route.params.bookname:null,
            mess:'',
            book:{},
            tf:true,
            books1:null,
            message:null,
        }
    },
    watch: {
    tf(newValue) {
      console.log('tf changed:', newValue);
    },
    message(newValue) {
      console.log('message changed:', newValue);
    }
  }
  ,
    computed:{
        books:() => books,
        num(){
            return this.books1==null?this.books.length:this.books1.length
        }
    },
    created() {
      if(this.message==6){this.tf=!this.tf;}
                  console.log('2. 创建之后触发');
                  // 在这个周期中可以操作data中的数据的（常用周期函数之一）
                
              },
    mounted:function(){
        this.query()
    },
    methods:{
        querytype:function(type){
            this.tf=true
            this.books1=[]
            books.forEach(item =>{
                if (item.type===type){this.books1.push({...item})}
            })
        },
        query:function(){
            if(this.$route.params.bookname){//Home查询书名结果
                this.bookname=this.$route.params.bookname
                this.books1=[]
                books.filter(item =>{
                    if (item.bookname.indexOf(this.bookname)>-1){this.books1.push({...item})}
                })
                if(this.books1.length==0) return this.mess="该书籍暂未入库"
                this.tf=true
            }
            if(this.$route.params.isbn){//Main点击书籍图片跳转详情
                books.filter(item =>{
                    if (item.isbn==this.$route.params.isbn){this.book=item}
                })
                this.tf=false
            }
        },
        onchange:function(book){
            this.book=book,
            this.tf=!this.tf
        },
        getMessage(data) {
                  this.message = 3;
              },
        onchangeBook(book) {
        console.log('Selected book:', book);
        this.book = book;
        this.message = this.message+3;
        this.tf=0;//接受来自子组件的消息，再改变现在的组件
       console.log(this.message);
       console.log(this.tf);
      }
    },
  }
  </script>